<template>
  <div class="app-container  bg-gray">
    <transition name="fade-transform" mode="out-in">
      <router-view />
    </transition>
    <el-row v-if="isShow" class="box-1">
      <el-col :span="24">
        <el-card>
          <div class="header">
            <div>
              <el-select v-model="searchTerms.level" placeholder="客户星级" clearable @change="getData">
                <el-option :value="1" label="一星客户" />
                <el-option :value="2" label="二星客户" />
                <el-option :value="3" label="三星客户" />
                <el-option :value="4" label="四星客户" />
                <el-option :value="5" label="五星客户" />
              </el-select>
              <el-select v-model="searchTerms.type" placeholder="搜索类型" clearable>
                <el-option :value="1" label="客户名称" />
                <el-option :value="2" label="手机号" />
                <el-option :value="3" label="跟进人" />
                <el-option :value="4" label="ID" />
              </el-select>
              <el-input v-model="searchTerms.searchValue" placeholder="请输入内容" class="search-input" @change="getData" />
              <el-button type="success" class="do-btn" icon="el-icon-search" @click="getData">搜索</el-button>
            </div>
          </div>
          <el-table v-loading="tableLoading" :data="tableData" :max-height="tableMaxHeight" border highlight-current-row @sort-change="handleSortChange">
            <!--<el-table-column prop="member_id" label="ID" width="80" header-align="center" align="center" sortable />-->
            <el-table-column prop="star_class" label="客户星级" width="160" header-align="center" align="center" sortable>
              <template slot-scope="scope">
                <!--<el-tag type="warning">
                  {{ scope.row['star_class'] ?count[scope.row['star_class']-1]:'一' }}星客户
                </el-tag>-->
                <el-rate v-model="scope.row['star_class']" disabled/>
              </template>
            </el-table-column>
            <el-table-column label="客户名称" min-width="100" header-align="center" align="center">
              <template slot-scope="scope">
                {{ scope.row.member_name?scope.row.member_name:'--' }}
              </template>
            </el-table-column>
            <el-table-column prop="member_phone" label="手机号" min-width="120" header-align="center" align="center"/>
            <el-table-column prop="admin_name" label="跟进人" min-width="100" header-align="center" align="center"/>
            <el-table-column prop="created_at" label="最近订单" min-width="160" header-align="center" align="center" sortable/>
            <el-table-column prop="surplus_day" label="到期时间" width="120" header-align="center" align="center" sortable>
              <template slot-scope="scope">
                {{ scope.row['surplus_day'] + '天' }}
              </template>
            </el-table-column>
            <el-table-column label="提醒时间" width="160" header-align="center" align="center">
              <template slot-scope="scope">
                {{ scope.row['remind_time'] || '未设置' }}
              </template>
            </el-table-column>
            <el-table-column prop="expire" label="到期时间" width="120" header-align="center" align="center" sortable>
              <template slot-scope="scope">
                {{ scope.row['expire']?(scope.row['expire'] + '天'): '--' }}
              </template>
            </el-table-column>
            <el-table-column label="备注" min-width="220" header-align="center" align="center">
              <template slot-scope="scope">
                {{ scope.row['remarks'] || '--' }}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="320" header-align="center" align="center" fixed="right">
              <template slot-scope="scope">
                <el-button type="primary" size="small" @click="toAfterSaleDetails(scope.row, 1)">沟通</el-button>
                <el-button type="info" size="small" @click="toAfterSaleDetails(scope.row, 2)">运维</el-button>
                <el-button type="success" size="small" class="bg-green" @click="toAfterSaleDetails(scope.row, 3)">合同</el-button>
                <el-button type="danger" size="small" @click="toAfterSaleDetails(scope.row, 4)" >订单</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :current-page.sync="currentPage"
            :page-size="pageSize"
            :page-sizes="pageSizes"
            :total="total"
            class="pagination"
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { handleSortChange, handleSizeChange, handleCurrentChange } from '../../../utils/table';
export default {
  data() {
    return {
      count: ['一', '二', '三', '四', '五'],
      isShow: false,
      searchTerms: {
        type: 1,
        level: '',
        searchValue: ''
      },

      // 表格相关数据
      tableMaxHeight: document.documentElement.clientHeight - 300,
      tableLoading: false,
      currentPage: 1,
      pageSize: this.$store.getters.userInfo.pageSize,
      pageSizes: [10, 20, 50, 100, 1000],
      total: 0,
      tableData: []
    }
  },

  watch: {
    $route(to) {
      if (to.name === '售后管理') {
        this.getData();
        setTimeout(() => {
          this.isShow = true;
        }, 500)
      } else {
        this.isShow = false;
      }
    }
  },
  created() {
    if (this.$route.name === '售后管理') {
      this.isShow = true;
      this.getData();
    }
  },

  methods: {
    handleCurrentChange, handleSizeChange, handleSortChange,
    getData(order) {
      this.tableLoading = true;
      order || (order = {});
      const url = 'member/afterSaleService';
      const data = {
        pageNo: this.currentPage,
        pageSize: this.pageSize,
        search: this.searchTerms.searchValue,
        type: this.searchTerms.type,
        star_class: this.searchTerms.level
      };
     order.sortName && (data.sortName = order.sortName);
      order.sortOrder && (data.sortOrder = order.sortOrder);
      this.$store.dispatch('GetConnect', { url, data }).then(res => {
        this.tableData = res.data.rows;
        this.total = res.data.total;
        this.tableLoading = false;
      }).catch(e => {
        this.tableLoading = false;
        this.$message.error(e.msg + ',请刷新或联系管理员');
      })
    },

    /**
     * 跳转用户修改页面
     * title: 新增/修改
     * row: 当前点击的行的数据,为空时为新增
     */
    toAfterSaleDetails(row, type) {
      this.isShow = false;
      const query = {
        id: row.member_id,
        type: type
      };
      this.$router.push({
        path: '/user/afterSales/details',
        query: query
      });
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
@import '../../../styles/index.scss';
.box-1 {
  .header {
    @include flex-row(center, space-between);
    padding-bottom: 15px;
    flex-wrap: wrap;
    > div {
       @include flex-row(center, flex-start);
       flex-wrap: wrap;
       width: 100%;
     }
    .el-select {
      padding-right: 15px;
      width: 180px;
    }
    .search-input {
      width: 240px;
    }
    .do-btn {
      @extend .bg-green;
      margin-left: 6px;
    }
  }
}
.el-tag {
  cursor: pointer;
}
</style>
